import { history } from 'umi';
import React, { useState, useRef } from 'react';
import { Button, Toast, Divider } from 'antd-mobile';
import type { ToastHandler } from 'antd-mobile/es/components/toast';

export default function index() {
  const handler = useRef<ToastHandler>();
  const [checked, setChecked] = useState<any>(false);

  function skipCode() {
    if (checked === true) {
      history.push('/code');
    } else {
      Toast.show({ content: '请同意并勾选服务协议' });
    }
  }
  function checkhandle(e: any) {
    setChecked(e);
  }
  function skip() {
    if (checked === true) {
      history.push('/code');
    } else {
      Toast.show({ content: '请同意并勾选服务协议' });
    }
  }
  function back() {
    history.push('hello/home');
  }
  return (
    <div className="login-box">
      <div className="back" onClick={() => back()}>
        关闭
      </div>
      <div></div>
      <div className="box2">
        <h1>156****2815</h1>
        <p>中国移动提供认证服务</p>
      </div>
      <div className="btn">
        <Button
          block
          shape="rounded"
          color="primary"
          onClick={() => skip()}
          style={{ background: '#FE723D', border: '0px', padding: '0.35rem' }}
        >
          本机号码一键登录
        </Button>
        <Button
          block
          shape="rounded"
          color="primary"
          onClick={() => skipCode()}
          style={{
            background: '#FAE9E1',
            border: '0px',
            marginTop: '0.5rem',
            color: '#FE723D',
            padding: '0.35rem',
          }}
        >
          短信验证码或密码登录
        </Button>
      </div>

      <div className="divider">
        <Divider
          style={{
            color: 'black',
            borderColor: '#ECECEC',
            borderStyle: 'solid',
          }}
        >
          其他登录方式
        </Divider>
      </div>
      <div className="images">
        <img src={require('./images/wx.png')} alt="" />
        <img src={require('./images/pg.png')} alt="" />
        <img src={require('./images/qq.png')} alt="" />
      </div>
      <div className="checks">
        <input
          type="checkbox"
          checked={checked}
          onChange={(e) => checkhandle(e.target.checked)}
        />
        <a href="https://terms.alicdn.com/legal-agreement/terms/suit_bu1_taobao/suit_bu1_taobao201703241622_61002.html?spm=a2107.1.0.0.15c54265byUT94">
          &nbsp;&nbsp;我同意并遵守
          <span style={{ color: '#FE723D' }}>《中国移动认证服务条款》</span>和
          <span style={{ color: '#FE723D' }}>《使用协议》</span>
          、&nbsp;《隐私政策》
        </a>
      </div>
    </div>
  );
}
